<template>
  <div>
    <div v-if="MovieInfo" :style="{height:height+'px'}">
      <div v-for="(M,index) in MovieInfo" :key="index" class="infinite-list">
        <el-container>
          <h1 :style="{color: index === 0 ? 'red' : 'black'}" >NO.{{index+1}}</h1>
          <el-button type="text" @click="SelectMovie(M.MovieID);drawer=true">
            <el-aside width="150px">
              <img :src="M.MovieImg" class="image" style="height:200px;width:150px" />
            </el-aside>
          </el-button>
          <el-main>
            <el-container>
              <el-header><strong style="font-size:30px">{{M.MovieName}}</strong></el-header>
              <el-main>{{M.MovieReview}}</el-main>
            </el-container>
          </el-main>
        </el-container>
        <el-divider></el-divider>
      </div>
    </div>
     <el-drawer title="电影详情" :visible.sync="drawer" size="40%">
      <MovieInfo :key="id"></MovieInfo>
    </el-drawer>
  </div>
</template>
<script>
import MovieInfo from '@/views/MovieInfo'
export default {
  components:{
    MovieInfo
  },
  data() {
    return {
      MovieInfo: [],
      drawer: false,
      id: +new Date()
    };
  },
  mounted() {
    this.Ajax.get("api/MovieInfoes/GetHotMovie").then(Movie => {
      this.MovieInfo = Movie.data;
      console.log(this.MovieInfo[0]);
    });
  },
  created() {
    this.height = window.innerHeight - 180;
  },
  methods: {
     SelectMovie(MovieID) {
      this.$store.commit("UpdateMovieID", MovieID);
      this.id = +new Date();
    }
  }
};
</script>